<template>
  <div class="container">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" align="center">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center">
      </el-table-column>
      <el-table-column prop="address" label="类型" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <my-dialog
      v-if="tableSetting.dialogVisible"
      :tableSetting="tableSetting"
      @save="save"
    ></my-dialog>
  </div>
</template>

<script>
import {
  getDIANLI,
  getMEIQI,
  getTIANRANQI,
  getYEHUAQI,
  getList,
} from "./api.js";
import myDialog from "./dialog.vue";
export default {
  components: {
    myDialog,
  },
  data() {
    return {
      tableOption: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎1",
          sex: "女",
          address: "电力",
          type: "input",
          prop: "dianli",
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          sex: "男",
          type: "select",
          address: "煤气",
          prop: "meiqi",
        },
        {
          date: "2016-05-01",
          name: "王小虎3",
          sex: "女",
          type: "date",
          address: "天然气",
          prop: "tianranqi",
        },
        {
          date: "2016-05-03",
          type: "radio",
          name: "王小虎4",
          sex: "男",
          address: "液化气",
          prop: "yehuaqi",
        },
      ],
      tableSetting: {
        dialogVisible: false,
        api: null,
        requestParams: null,
        tableOption: [],
      },
    };
  },

  created() {},
  mounted() {},

  methods: {
    // 点击编辑
    async edit(data) {
      console.log(data,'data');
      const res = await getList(data.type);
      let list = [];
      if (res.success) {
        list = res.data;
      }
      this.tableSetting.requestParams = data;
      this.tableSetting.api = this.findApi(data.prop);
      this.tableSetting.tableOption = [
        {
          label: data.address,
          prop: data.prop,
          type: data.type,
          options: list,
        },
      ];
      this.tableSetting.dialogVisible = true; // 打开弹窗
    },
    save(data) {
      console.log(data, "点击保存");
    },
    findApi(type) {
      if (type === "dianli") {
        return getDIANLI;
      }
      if (type === "meiqi") {
        return getMEIQI;
      }
      if (type === "tianranqi") {
        return getTIANRANQI;
      }
      if (type === "yehuaqi") {
        return getYEHUAQI;
      }
    },
  },
};
</script>

<style scoped lang='less'>
.container {
  width: 800px;
  margin: 50px auto;
}
</style>
